<template>
  <div id="login" v-loading="loading">
      <div class="logintemp">
         <span style="font-size: 30px; color: white;">盈佳管理系统</span>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item>
                <el-input
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-search"
                  v-model="form.username">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  placeholder="请输入密码"
                  prefix-icon="el-icon-search"
                  v-model="form.password">
                </el-input>
              </el-form-item>
              <el-form-item>
              <el-checkbox-group v-model="type">
                  <el-checkbox name="type">保持登入状态</el-checkbox>
                 </el-checkbox-group>
              </el-form-item>
                <el-form-item>
                  <el-button type="primary" plain @click="submitForm()">登入</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

  export default {
    name:'login',
    data(){
      return{
        form:{
          username:'mu',
          password:'111111',
        },
        type:'',
        loading:false,
      }
    },
    methods: {
      submitForm(){
        this.loading = !this.loading
        this.$store.dispatch("login",this.form).then(() => {
            this.loading = !this.loading
            this.$router.push({path:'/container'})
        }).catch(() => {
          this.$router.push({path:'/login'})
          this.loading = !this.loading
        });
      },
    }
  }
</script>

<style>
  #login{
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    position:relative;
    background-color: rgb(190, 186, 186);
  }
  .logintemp{
    width: 25%;
    height: 30%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-30%);
  }
 .el-form-item__content{
  margin: 0 !important;
 }
 .el-form{
  margin-top: 50px;
 }
 .el-input{
   width: 340px;
 }
 .el-button{
  width: 340px;
 }
 .el-checkbox {
  float: left;
  margin-left:65px;
 }
 .el-form-item__content{
  line-height: 0;
 }
</style>
